<template>
	<view class="u-page">
		<!-- #ifdef H5 -->
		<view class="tou">
			<u-icon name="arrow-left" size="50" @click='onfanhui'></u-icon>
		</view>
		<!-- #endif -->
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in collectionList" :key="index">
				<u-cell :title="`${item.title}`">
					<u-avatar slot="icon" shape="square" size="100" :src="item.url"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectionList: [{
						id: 1,
						title: '健身完吃什么最好 吃得不对健身效果大打折扣',
						url: 'https://www.jirou.com/uploads/allimg/210111/156-21011110525KI.jpg'
					},
					{
						id: 2,
						title: '8个不长胖的健身美食!',
						url: 'https://ts1.cn.mm.bing.net/th/id/R-C.40edb2f6fe3948cf8e50edf046112bc7?rik=YfAdHe7FIsGabQ&riu=http%3a%2f%2fwww.yaling8.com%2fuploads%2fallimg%2f130312%2f1-130312194450594.jpg&ehk=NUfBbB5yZ49JtzIwphgrd5HDwsMUJ6WnxNdol14O%2bMQ%3d&risl=&pid=ImgRaw&r=0'
					},
					{
						id: 3,
						title: '掌握这些饮食方法就成功了一半',
						url: 'https://ts1.cn.mm.bing.net/th/id/R-C.c5ea2e9cad4c6970d78b1a2a51ae6a5f?rik=2rEhDNMuihtopA&riu=http%3a%2f%2fcp1.douguo.net%2fupload%2fcaiku%2f2%2f7%2f0%2fyuan_27499949072d674506afba59a9f22f40.jpg&ehk=mFeepa1p0d3sKUaXDRkf%2f%2bnwP9ckZmqhUKZ%2b%2bGU296A%3d&risl=&pid=ImgRaw&r=0'
					},
					{
						id: 4,
						title: '不同的健身时间，不同的健身食谱',
						url: 'https://www.jianshen8.com/uploads/allimg/190121/12_190121145306_1.jpg',
					}
				]
			};
		},
		methods: {
			onfanhui() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.tou {
		width: 100%;
		height: 50px;
		background-color: white;
		display: flex;
	}
</style>
